import { observer, useLocalObservable } from 'mobx-react'
import styles from './index.module.less'
import React, { useEffect, useState } from 'react'
import Store from './store'
import Chart from './components/Chart'
import share from '@/resource/myFile/share.png'
import Picture from './components/Picture'
import Vision from './components/Vision'
import EvaluationResult from '@/components/FileEvaluation'
import InterviewResult from './components/Interview'
import Position from './components/Position'
import Resume from './components/Resume'
import { useDrag } from '@use-gesture/react'
import { Toast } from 'antd-mobile'
import WorkTest from './components/WorkTest'

export default observer((props: any) => {
    console.log(props)
    const store = useLocalObservable(() => new Store())
    useEffect(() => {
        const authToken = props?.location?.query?.auth_token
        store.getBarriers(authToken)
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])

    const showFile = () => {
        console.log(store?.barriersList?.type)
        if (store.barriersList.type === '1') {
            return <Picture data={store.barriersList} />
        } else if (store.barriersList.type === '2') {
            return <Chart data={store.barriersList} />
        } else if (store.barriersList.type === '3') {
            return <Vision data={store.barriersList} />
        } else if (store.barriersList.type === '4' || store.barriersList.type === '5') {
            return <EvaluationResult data={store.barriersList} />
        } else if (store.barriersList.type === '6') {
            return <InterviewResult data={store.barriersList} />
        } else if (store?.barriersList?.type?.toString() === '7') {
            return <Position data={store.barriersList} />
        } else if (store?.barriersList?.type?.toString() === '8') {
            return <Resume data={store.barriersList} />
        } else if (store?.barriersList?.type?.toString() === '9') {
            return <WorkTest data={store.barriersList} />
        }
    }

    const bind = useDrag(
        async ({ down, movement: [x], args }) => {
            const { next_id, last_id } = store.barriersList
            if (!down) {
                if (x < -80 && next_id) {
                    Toast.show({ icon: 'loading', content: '加载中…' })
                    /** 左划 */
                    await store.getBarriersNextData(next_id)
                } else if (x > 80 && last_id) {
                    Toast.show({ icon: 'loading', content: '加载中…' })
                    /** 右划 */
                    await store.getBarriersLastData(last_id)
                }
                Toast.clear()
                if (x < -80 && next_id === '') {
                    Toast.show({
                        content: '已是最后一页',
                        duration: 1000,
                    })
                } else if (x > 80 && last_id === '') {
                    Toast.show({
                        content: '已是最后一页',
                        duration: 1000,
                    })
                }
            }
        },
        {
            axis: 'x',
            preventScroll: true,
            pointer: { touch: true },
            triggerAllEvents: true,
        },
    )
    return (
        <div className={styles.page}>
            <div className={styles.content} {...bind()}>
                <div className={styles.next} />
                <div className={styles.top}>
                    <div>我的档案</div>
                </div>
                {/* <div className={styles.share_img}>
                    <img src={share} />
                </div> */}
                {showFile()}
            </div>
        </div>
    )
})
